<template>
  <div class="table-style">
    <h4>{{goodsid ? '更新产品':'添加产品'}}</h4>
    <div class="form-style">
      <el-form  :inline="true" ref="goods" :model="goods"  :rules="rules" label-width="100px">
        <el-form-item label="商品型号" prop="Name" style="width:300px">
          <el-input v-model="goods.Name"></el-input>
        </el-form-item>
        <el-form-item label="商品标题" prop="Title" style="width:300px">
          <el-input v-model="goods.Title"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" prop="Gtype" style="width:300px">
          <el-input v-model="goods.Gtype"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌" prop="Brandid" style="width:300px">
          <el-select v-model="goods.Brandid" placeholder="品牌选择">
             <el-option v-for="item in Brand" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>       
          </el-select>
        </el-form-item >
        <el-form-item label="商品系列" prop="Classid" style="width:300px">
          <el-select v-model="goods.Classid" placeholder="系列选择">
             <el-option v-for="item in Class" :key="item.Id"  :label="item.Name" :value="item.Id"> </el-option>       
          </el-select>
        </el-form-item>
        <el-form-item label="商品规格" style="width:300px">
          <el-input v-model="goods.Detail"></el-input>
        </el-form-item>
        <el-form-item label="市场价" prop="Price0" style="width:300px">
          <el-input v-model="goods.Price0"></el-input>
        </el-form-item>
        <el-form-item label="活动价" prop="Price1" style="width:300px"> 
          <el-input v-model="goods.Price1"></el-input>
        </el-form-item>
        <el-form-item label="序号" style="width:300px">
          <el-input v-model="goods.Sort"></el-input>
        </el-form-item>
         <el-form-item label="浏览量" style="width:300px">
          <el-input v-model="goods.Viewcount"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="Desc" style="width:300px">
          <el-input v-model="goods.Desc"></el-input>
        </el-form-item>
        <el-form-item label="商品视频连接" style="width:300px">
          <el-input v-model="goods.Video"></el-input>
        </el-form-item>
        <el-form-item label="材质描述" prop="Material" style="width:300px">
           <el-input v-model="goods.Material"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="form-footer" v-if="goodsid">
              <el-button type="warning" @click="goodsUpdate">更新</el-button>
              <el-button type="primary" @click="productSpec(goods.Id,goods.Mdid)">规格管理</el-button>
          </div>
          <div class="form-footer" v-else>
              <el-button type="primary" @click="goodsSubmit('goods')">提交</el-button>
          </div>
         
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { GoodsInfo,updateGoodsInfo,searchGoods } from '@/api/mdlist'
export default {
  data() {
    return {
      goodsid: '',
      mdid:'',
      goods:{},
      Class:[],
      Brand:[],
      imgUrl:"", //添加图片的URL
      rules: {
          Name: [
            { required: true, message: '请输入商品型号', trigger: 'blur' }
          ],
          Title: [
            { required: true, message: '请输入商品标题', trigger: 'blur' }
          ],
          Gtype:[
            { required: true, message: '请输入商品类型', trigger: 'blur'}
          ],
          Brandid:[
            { required: true, message: '请选择商品品牌', trigger: 'blur'}
          ],
          Classid:[
            { required: true, message: '请选择商品类型', trigger: 'blur'}
          ],
          Price0:[
            { required: true, message: '请输入商品市场价', trigger: 'blur'}
          ],
          Price1:[
            { required: true, message: '请输入商品活动价', trigger: 'blur'}
          ],
          Desc:[
             { required: true, message: '请输入商品的描述', trigger: 'blur'}
          ],
          Material:[
             { required: true, message: '请输入商品的材质', trigger: 'blur'}
          ]
         
        }

    }
  },
  created() {
    //产品的id
    this.goodsid = this.$route.query.goodsid?this.$route.query.goodsid:0
    this.mdid=this.$route.query.mdid?this.$route.query.mdid:''
    //请求数据
    this.oneGoods( this.goodsid,this.mdid)
  },
  methods: {
    //产品详情
    oneGoods(id,mdid) {
      GoodsInfo({ Goodsid: id ,Mdid:mdid}).then((res) => {
        if (res.msg === 'success') {
          this.goods = res.data.Goods.Goods
          this.Class = res.data.Class,
          this.Brand = res.data.Brand
        }      
      })    
    },

    //添加图片
    // addImg(event) {
    //   let that = this
    //   let url
    //   let file = event.target.files[0];
    //    var reader = new FileReader();
    //     reader.readAsDataURL(file);
    //      reader.onload = function(e) {
    //         url = this.result.substring(this.result.indexOf(",") + 1);
    //         that.imgUrl = "data:image/png;base64," + url;
    //      }
    // },
    
    //更新产品
    goodsUpdate(){
      let id = this.goods.Id
      this.goods.Sort = Number(this.goods.Sort)
      this.goods.Viewcount = Number(this.goods.Viewcount)
      updateGoodsInfo({ Goodsid: id ,Mdid:this.goods.Mdid},this.goods).then((res)=> {
        if (res.msg === 'success') {
          this.$message.success('更新成功');
          this.oneGoods(id,this.goods.Mdid)
        }else{
          this.$message.error(res.msg);
        }
      })
    },

    //添加商品
    goodsSubmit(formName){
       this.$refs[formName].validate((valid) => {
          if (valid) {
             this.goods.Sort = Number(this.goods.Sort)
             this.goods.Viewcount = Number(this.goods.Viewcount)
             updateGoodsInfo({ Goodsid: "",Mdid:this.mdid},this.goods).then((res)=> {
              if (res.msg === 'success') {
                alert('添加成功！')
                this.$router.push({ name: "goodslist"});
              }
            }) 
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },

    //添加产品规格
    productSpec(goodsid,mdid){
      this.$router.push({ name: "cbd-goodsSpec", query: { goodsid: goodsid,mdid:mdid} });
    }

  },
}
</script>

<style>
.table-style {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.form-style {
  width: 100%;
  height: 100%;
  border: 1px solid #dddddd;
  padding: 20px;
  border-radius: 10px;
}
.add-img {
  width: 120px;
  height: 36px;
  position: relative;
  border: 1px solid #1890ff;
  border-radius: 5px;
  line-height: 36px;
  text-align: center;
  color: #FFFFFF;
  background-color: #1890ff;
}
.add-img input {
  width: 120px;
  height: 36px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1;
}
.img-box {
  width: 170px;
  height: 170px;
  border: 1px solid #e61a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 5px;
}
.img-box img {
  width: 100%;
  height: auto ;
}

</style>
